import React, {Component} from 'react';
import PropTypes from "prop-types";
import { StyleSheet, TextInput, View, TouchableOpacity, Image } from 'react-native';

import color from '../../config/theme/standard/color.js';
import fontSize from '../../config/theme/standard/fonts.js';


export default class NumberBox extends Component {
    constructor(props){
        super(props);
        this.state={
            text:props.text
        };
        this.onPressEvent=this.onPressEvent.bind(this);
    }

    onPressEvent(flag){
        let text = Number(this.state.text) ;
        if(flag == 'input'){
            if(text >= this.props.max){
                text = this.props.max;
            }else if(text <= this.props.min){
                text = this.props.min;
            }
            if(typeof this.props.callBackEvent === "function"){
                this.props.callBackEvent(text);
            }
            this.setState({text:String(text)});
            return;
        }



        if( flag == "add" && text < this.props.max){
            text = text + this.props.step;
        }else if( flag == "reduce" && text > this.props.min){
            text = text - this.props.step;
        }
        if(typeof this.props.callBackEvent === "function"){
            this.props.callBackEvent(text);
        }
        text = String(text);
        this.setState({text})
    }


    render() {
        let text = this.state.text;
        let img1 = this.state.text == this.props.min ? require( '../../assets/icon_numberbox_minus_disabled.png') : require('../../assets/icon_numberbox_minus.png');
        let img2 = this.state.text == this.props.max ? require( '../../assets/icon_numberbox_add_disabled.png') : require('../../assets/icon_numberbox_add.png');
        let inputWidth = null;
        if(this.props.max > 9999){
            inputWidth = 65;
        }else if(this.props.max > 999){
            inputWidth = 55;
        }else{
            inputWidth = 43;
        }
        return (
            <View style={styles.container}>
                <View style={styles.buttonContainer}>
                    <TouchableOpacity activeOpacity={0.7} style={styles.button} onPress={()=>{this.onPressEvent("reduce")}} disabled={this.state.text == this.props.min ? true : false}>
                        <Image
                            style={styles.minus}
                            source={img1}
                            onPress={()=>{this.onPressEvent("reduce")}}
                        />
                    </TouchableOpacity>
                    <View>
                        <TextInput
                            ref="textInput"
                            style={[styles.text,{width:inputWidth}]}
                            underlineColorAndroid='transparent'
                            value ={this.state.text}
                            keyboardType={"numeric"}
                            onChangeText={(text)=>{this.setState({text})}}
                            onBlur={()=>{this.onPressEvent("input")}}
                            editable={this.props.disabledInput}
                        />
                    </View>
                    <TouchableOpacity activeOpacity={0.7} style={styles.button} onPress={()=>{this.onPressEvent("add")}} disabled={this.state.text == this.props.max ? true : false}>
                        <Image
                            style={styles.plus}
                            source={img2}
                            onPress={()=>{this.onPressEvent("add")}}
                        />
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
};

NumberBox.propTypes={
    text: PropTypes.string,
    max: PropTypes.number,
    min: PropTypes.number,
    step: PropTypes.number,
    callBackEvent: PropTypes.func,
    disabledInput: PropTypes.bool
};
NumberBox.defaultProps = {
    step: 1,
    min: 0,
    max: 9999,
    disabledInput: false,
};
const styles = StyleSheet.create({
    container:{
        flexDirection: 'row',
    },
    buttonContainer:{
        borderColor:color.numberBox.border,
        borderWidth: 1,
        borderStyle: 'solid',
        flexDirection: 'row',
        borderRadius: 2
    },
    button:{
        width: 34.5,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text:{
        width: 43,
        height: 30,
        borderColor:color.numberBox.border,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderStyle: 'solid',
        alignItems: 'center',
        justifyContent: 'center',
        margin: 0,
        paddingTop: 0,
        paddingBottom: 0,
        textAlign: 'center',
        color:color.numberBox.text,
        fontSize: fontSize.numberBox.textFontSize,
    },
    minus: {
        width: 16,
        height: 16,
    },
    plus: {
        width: 16,
        height: 16,
    }
});
